<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TODO List</title>
    <!-- 引入 Element UI 的样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
<div id="app" style="text-align: center;">
    <!-- 大标题 -->
    <h1>Wanqing's Todo List</h1>
    <!-- 输入框和按钮 -->
    <div style="margin: auto; width: 40%;">
        <el-input v-model="newTodo" type="textarea" placeholder="请输入待办事项" style="width: 100%; margin-bottom: 20px"></el-input>
        <el-button type="primary" @click="addTodo" icon="el-icon-plus" circle ></el-button>
    </div>
    <!-- Todo List 主体 -->
    <div v-if="todos.length > 0" style="width: 40%; margin: auto; margin-top: 40px">
        <div v-for="(todo, index) in todos" :key="index" style="display: flex; align-items: center; margin-bottom: 10px;">
            <el-checkbox v-model="todo.state" style="margin-bottom: 2px">{{ todo.itemName }}</el-checkbox>
            <el-button type="text" @click="removeTodo(index)" icon="el-icon-delete" circle></el-button>
        </div>
    </div>
    <div v-else style="margin-top: 20px">暂无待办事项</div>
</div>

<!-- 引入 Vue.js 和 Element UI 的脚本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            newTodo: '', // 新待办事项的内容
            todos: [] // 存储所有待办事项的数组
        },
        methods: {
            // 添加待办事项
            addTodo() {
                if (this.newTodo.trim() !== '') {
                    this.todos.push({ content: this.newTodo, checked: false });
                    this.newTodo = '';
                }
            },
            // 删除待办事项
            removeTodo(index) {
                this.todos.splice(index, 1);
            }
        },
        created() {
            // 在组件创建时发起 HTTP 请求
            fetch('/todo/list')
                .then(response => response.json()) // 假设返回的数据是 JSON 格式
                .then(data => {
                    // 请求成功，将数据赋值给 tableData
                    this.todos = data;
                    console.log(data)
                })
                .catch(error => {
                    // 请求失败，处理错误
                    console.error('请求数据时发生错误:', error);
                });
        }
    });
</script>
</body>

<style>
    .el-checkbox .el-checkbox__label {
        font-size: 20px; /* 修改文字大小，例如设置为 14px */
        line-height: 1.7;
        font-family: 'PingFang SC';
        color: black;
    }
</style>
</html>
